import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
import "../component" as C

Rectangle {
    id: timeCard
    color: "transparent"
    radius: 10
    clip: true
    visible: true

    Theme { id: theme }
    FontLoader {
        id: iconFont
        source: "qrc:/assets/fontawesome-free-6.7.2-desktop/otfs/Font Awesome 6 Free-Solid-900.otf"
    }

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.AllButtons
        onClicked: {}
    }

    property int year: new Date().getFullYear()
    property int month: new Date().getMonth() + 1
    property int day: new Date().getDate()
    property int hour: new Date().getHours()
    property int minute: new Date().getMinutes()

    function daysInMonth(y, m) { return new Date(y, m, 0).getDate(); }
    function clampDay() {
        var maxd = daysInMonth(year, month);
        if (day > maxd) day = maxd;
        if (day < 1) day = 1;
    }

    ColumnLayout {
        Layout.alignment: Qt.AlignHCenter
        anchors.fill: parent
        spacing: 20

        Row {
            spacing:500
            width: parent.width
            Layout.alignment: Qt.AlignHCenter

            C.ZButtonImage{
                id: backBtn
                btnImagePressed: "qrc:/assets/back_pressed.png"
                btnImage:"qrc:/assets/back.png"
                onClicked: {
                    console.log("返回")
                    swipeSettingManagementView.currentIndex =0;
                }
            }
            Label {
                id: userTitle
                text: "系统时间"
                font.pixelSize: 44
                font.bold: true
                color: "#333"
                Layout.alignment: Qt.AlignHCenter
            }

            C.ZButtonImage{
                id:saveBtn
                btnImagePressed: "qrc:/assets/save_pressed.png"
                btnImage:"qrc:/assets/save.png"
                onClicked: {
                    console.log("保存")
                    // 重置错误状态
                    swipeSettingManagementView.currentIndex =0;
                }
            }
        }

        Item {
            id: clockBox
            Layout.alignment: Qt.AlignHCenter
            width: 420; height: 420


            Image {
                anchors.fill: parent
                source: "qrc:/assets/clock.png"
                fillMode: Image.PreserveAspectFit
                smooth: true
            }
        }

        Row {
            id: pickers
            spacing: 32
            Layout.alignment: Qt.AlignHCenter
            Layout.topMargin: -50
            component Dial: Item {
                property string label: ""
                property int value: 0
                property int min: 0
                property int max: 100
                property string display: ""
                property int buttonSize: 270  // 90 * 3
                property int inputWidth: 220
                property int inputHeight: 92
                width: inputWidth
                height: 500

                Rectangle {
                    id: upButton
                    width: buttonSize; height: buttonSize; radius: buttonSize / 2; color: "transparent"
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                        top: parent.top
                        topMargin: 10
                    }
                    scale: 1.0
                    opacity: 1.0

                    Image {
                        anchors.centerIn: parent
                        source: "qrc:/assets/up.png"
                        fillMode: Image.PreserveAspectFit
                        smooth: true
                        width: buttonSize * 0.5
                        height: buttonSize * 0.5
                    }

                    Behavior on scale { NumberAnimation { duration: 120; easing.type: Easing.OutQuad } }
                    Behavior on opacity { NumberAnimation { duration: 120 } }

                    MouseArea {
                        anchors.fill: parent
                        onPressed: { parent.scale = 0.92; parent.opacity = 0.85 }
                        onReleased: { parent.scale = 1.0; parent.opacity = 1.0 }
                        onCanceled: { parent.scale = 1.0; parent.opacity = 1.0 }
                        onClicked: { if (value < max) value++; }
                    }
                }

                Rectangle {
                    id: inputBox
                    width: inputWidth; height: inputHeight; radius: inputHeight / 2; color: "transparent"
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                        verticalCenter: parent.verticalCenter
                    }

                    Image {
                        anchors.fill: parent
                        source: "qrc:/assets/time input.png"
                        fillMode: Image.Stretch
                        smooth: true
                    }
                    Text {
                        anchors.centerIn: parent
                        text: display !== "" ? display : value
                        font.pixelSize: 36
                        font.bold: true
                        color: theme.secondaryColor
                    }
                }

                Rectangle {
                    id: downButton
                    width: buttonSize; height: buttonSize; radius: buttonSize / 2; color: "transparent"
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                        bottom: parent.bottom
                        bottomMargin: 10
                    }
                    scale: 1.0
                    opacity: 1.0

                    Image {
                        anchors.centerIn: parent
                        source: "qrc:/assets/down.png"
                        fillMode: Image.PreserveAspectFit
                        smooth: true
                        width: buttonSize * 0.5
                        height: buttonSize * 0.5
                    }

                    Behavior on scale { NumberAnimation { duration: 120; easing.type: Easing.OutQuad } }
                    Behavior on opacity { NumberAnimation { duration: 120 } }

                    MouseArea {
                        anchors.fill: parent
                        onPressed: { parent.scale = 0.92; parent.opacity = 0.85 }
                        onReleased: { parent.scale = 1.0; parent.opacity = 1.0 }
                        onCanceled: { parent.scale = 1.0; parent.opacity = 1.0 }
                        onClicked: { if (value > min) value--; }
                    }
                }
            }

            Dial { label: "年"; value: timeCard.year; min: 1970; max: 2099; onValueChanged: { timeCard.year = value; clampDay(); } display: String(value) }
            Dial { label: "月"; value: timeCard.month; min: 1; max: 12; onValueChanged: { timeCard.month = value; clampDay(); } display: value < 10 ? "0" + value : String(value) }
            Dial { label: "日"; value: timeCard.day; min: 1; max: daysInMonth(timeCard.year, timeCard.month); onValueChanged: { timeCard.day = value; } display: value < 10 ? "0" + value : String(value) }
            Dial { label: "时"; value: timeCard.hour; min: 0; max: 23; onValueChanged: { timeCard.hour = value; } display: value < 10 ? "0" + value : String(value) }
            Dial { label: "分"; value: timeCard.minute; min: 0; max: 59; onValueChanged: { timeCard.minute = value; } display: value < 10 ? "0" + value : String(value) }
        }
    }
    // EButton {
    //     text: ""
    //     width: 72; height: 72; radius: 24
    //     anchors.top: timeCard.top
    //     anchors.right: timeCard.right
    //     anchors.topMargin: 30
    //     anchors.rightMargin: 120
    //     iconCharacter: "\uf0c7"
    //     z: 20
    //     onClicked: {
    //         var y = year, m = month, d = day, h = hour, mm = minute
    //         console.log("保存系统时间:", y + "-" + m + "-" + d + " " + h + ":" + mm)
    //     }
    // }

    // EButton {
    //     text: ""
    //     width: 72; height: 72; radius: 24
    //     anchors.top: timeCard.top
    //     anchors.left: timeCard.left
    //     anchors.topMargin: 30
    //     anchors.leftMargin: 220
    //     iconCharacter: "\uf060"
    //     z: 20
    //     onClicked: {
    //         //fadeOutOnBack.start()
    //         swipeSettingManagementView.currentIndex = 0
    //     }
    // }
}
